<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
	</head>
	<style type="text/css">
		#tutorial {
			border: 1px solid black;
			margin: 50px 500px;
		}
	</style>
	<body>
		<canvas id="tutorial" width="300" height="300"></canvas>
		<script type="text/javascript">
			function clock(){
				let timer = new Date();
				let ctx = document.getElementById("tutorial").getContext("2d");
				ctx.clearRect(0,0,300,300);
				ctx.save();
				ctx.strokeStyle = "red";
				ctx.translate(150,150);
				ctx.beginPath();
				ctx.arc(0,0,100,0,2*Math.PI,true);
				ctx.stroke();
				//画表盘
				ctx.save();
				ctx.strokeStyle = "#000000";
				let pi = Math.PI;
				for (var i = 0; i <60; i++) {
					ctx.save();
					ctx.rotate(2*Math.PI/60*i);
					ctx.beginPath();
					let h = i%5==0?"80":"95";
					ctx.moveTo(h,0);
					ctx.lineTo(100,0);
					ctx.lineCap = "square";
					ctx.lineWidth = "2";
					ctx.strokeStyle= i%5==0?"#000":"red";
					ctx.stroke();
					ctx.restore();
				}
				ctx.restore();
				
				
				
				ctx.rotate(2*Math.PI/60*timer.getSeconds());
				ctx.translate(100,0);
				ctx.beginPath();
				ctx.arc(0,0,5,0,2*Math.PI,true);
				ctx.fillStyle = "aqua";
				ctx.fill();
				ctx.restore();
				window.requestAnimationFrame(clock);
			}
			window.requestAnimationFrame(clock);
		</script>
	</body>
</html>
